<template>
	<view class="container">
		<view class="topbox">
			<view class="user flex-align-center">
				<image class="user-avatar" :src="userInfo.userInfo.avatarUrl || $setting.avatarUrl()"></image>
				<view class="user-con">
					<view class="user-name flex-space-between">{{userInfo.userInfo.nickName}}</view>
					<view class="user-id" v-if="userInfo.userInfo.mobile">手机号：{{userInfo.userInfo.mobile}}</view>
					<text class="user-id nothing" v-else>未认证手机号</text>
				</view>
			</view>
			<view class="user-qrcode" @click="openqrcode">
				<!-- <image class="cell-item-image" :src="$setting.imageUrl()+'qrcode.png'"></image> -->
				<image class="cell-item-image" src="../../../static/qrcode.png"></image>
				<view class="cell-item-view">查看推广码</view>
			</view>
		</view>
		<view class="content">
			<view class="cont-bg"></view>
			<view class="cont-min">
				<view class="cont-money">
					<view class="cont-mm" @click="jump('/pages/mine/promotion/promlist?dataType=1')">
						<view class="cont-m-t">本月订单额</view>
						<view class="cont-m-m">{{suminvite.month_price}}</view>
					</view>
					<view @click="jump('/pages/mine/promotion/promlist?dataType=0')">
						<view class="cont-m-t">总订单额</view>
						<view class="cont-m-m">{{userInfo.userInfo.total_invite_money}}</view>
					</view>
				</view>
				<view class="cont-btm">
					<view class="cont-tg b-b">
						<view class="cont-mm" @click="jump('/pages/mine/promotion/promlist?dataType=1')">
							<view class="tg-t">本月推广订单</view>
							<view class="tg-m">{{suminvite.month_num}}</view>
						</view>
						<view class="cont-mm" @click="jump('/pages/mine/promotion/promlist?dataType=0')">
							<view class="tg-t">累计推广订单</view>
							<view class="tg-m">{{userInfo.userInfo.total_invite_num}}</view>
						</view>
					</view>
					<view class="cont-tg">
						<view class="cont-mm" @click="jump('/pages/mine/promotion/promuserlist?dataType=2')">
							<view class="tg-t">今日新增客户</view>
							<view class="tg-m">{{suminvite.day_num}}</view>
						</view>
						
						<view class="cont-mm" @click="jump('/pages/mine/promotion/promuserlist?dataType=1')">
							<view class="tg-t">当月新增客户</view>
							<view class="tg-m">{{suminvite.user_month_num}}</view>
						</view>
						
						<view class="cont-mm" @click="jump('/pages/mine/promotion/promuserlist?dataType=0')">
							<view class="tg-t">累计客户</view>
							<view class="tg-m">{{userInfo.userInfo.total_invite}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					userInfo: {
						avatarUrl: "",
					},
				},
				suminvite:{
					month_price:0,
					month_num:0,
					day_num:0
				}
			}
		},
		onShow() {
			// console.log("123")
			this.getUserInfo();
			this.getRemInfo();
		},
		methods: {
			getUserInfo() {
				uni.$u.api.userInfo().then(res => {
					this.userInfo = res;
				})
			},
			getRemInfo() {
				uni.$u.api.getDayinvite().then(res => {
					this.suminvite = res.sum_result;
				})
			},
			openqrcode(){
				if(uni.$u.test.isEmpty(this.userInfo.userInfo.mobile)) {
					this.jump("/pages/login/login");
					return;
				}
				this.jump('/pages/mine/publicize/publicize_qrcode');
			},
			jump(url) {
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>

<style lang="scss">
	.topbox {
		background: #BB0024;
		padding: 30rpx;
		position: relative;
		
		.user {
			padding: 0 26rpx;
			
			
			.user-avatar {
				width: 112rpx;
				height: 112rpx;
				border-radius: 160rpx;
			}
			
			.user-con {
				margin-left: 22rpx;
				flex: 1;
				
				.user-name {
					font-size: 32rpx;
					color: #FFFFFF;
					font-weight: bold;
					line-height: 60rpx;
				}
				
				.user-id {
					font-size: 24rpx;
					color: rgba(255, 255, 255, 0.8);
					line-height: 40rpx;
					&.nothing{
						font-size: 20rpx;
						color: #e5e5e5;
						padding:8rpx 20rpx;
						background: #6b6b6b;
						border-radius: 10rpx;
					}
				}
			}
		}
		.user-qrcode{
			position: absolute;
			top: 40rpx;
			right: 50rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			
			.cell-item-image{
				width: 60rpx;
				height: 60rpx;
			}
			.cell-item-view{
				font-size: 20rpx;
				color: #f3f3f3;
				line-height: 45rpx;
			}
		}
	}
	
	.content{
		padding:30rpx 30rpx;
		.cont-min{
			background: #fff;
			border-radius: 30rpx;
			// padding:20rpx 20rpx;
		}
		.cont-money{
			background: linear-gradient(to bottom,#f3ebe1 0%,#f3ebe1 70%,#e9ddc5 100%);
			// background: linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%);
			padding:30rpx 35rpx;
			display: flex;
			flex-direction: row;
			border-radius: 30rpx 30rpx 0 0;
			font-family: Arial, Helvetica, sans-serif;
			.cont-m-t{
				font-size: 22rpx;
				color: #393939;
				line-height: 50rpx;
			}
			.cont-m-m{
				font-size: 34rpx;
				line-height: 70rpx;
				color: #ef6b00;
				font-weight: bold;
				&::after{
					content: " 元";
					font-size: 32rpx;
				}
			}
		}
		.cont-mm{
			flex-basis: 50%;
		}
		.cont-btm{
			padding:0 30rpx;
		}
		.cont-tg{
			padding:30rpx 0 35rpx 10rpx;
			display: flex;
			flex-direction: row;
			&.b-b{
				border-bottom: 1px solid #eee;
			}
			.tg-t{
				font-size: 22rpx;
				line-height: 50rpx;
				color: #6b6b6b;
			}
			.tg-m{
				font-size: 34rpx;
				line-height: 70rpx;
				color: #383838;
				font-weight: 500;
				font-family: Verdana, Geneva, Tahoma, sans-serif;
				
			}
		}
	}
</style>
